<template>
	<view class="recomend_single" @click="$doubleClick(detail)">
		<view>
			<view>
				<image :src="imgRemote+ware.goods.main_image" mode="aspectFill" v-if="isActive=='time'"
					class="photo r-5" />
				<image class="photo r-5" v-else
					:src="ware.main_image==''?imgRemote+config.main_image:imgRemote+ware.main_image"
					mode="aspectFill" />
			</view>
			<view>
				<view class="name fs-13 two-line" v-if="isActive=='time'">{{ware.goods.name}}</view>
				<view class="name fs-13 two-line" v-else>{{ware.name}}</view>

				<!-- <view class="gray_font hidden describe" v-if="ware.desc">
					{{ware.desc}}
				</view> -->
			</view>
		</view>
		<view>
			<view class="price">
				<view class="hidden flex-full">
					<view class="hidden flex-full">
						<block v-if="isActive=='time'">
							<view class="flex-left-right">
								<view>
									<view class="gray_font line_through" style="font-size: 22rpx;">
										¥{{ware.market_price}}</view>
									<view class="red_font fs-18">¥{{ware.activity_price}}</view>
								</view>
								<view><text class="qiang">抢</text></view>
								
							</view>


						</block>
						<block v-else><text class="red_font fs-18">¥{{ware.sku[0].market_price}}</text></block>

						<!-- -->
					</view>
				</view>
				<my-stepper v-if="ware.is_del" :val="ware.is_del"></my-stepper>
				<view class="iconfont plus" v-else @click="plusCart">
					&#xe600;
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData;
	const {
		imgRemote
	} = app;
	export default {
		props: ['ware', 'config', 'isActive'],
		data() {
			return {
				imgRemote: imgRemote
			}
		},
		methods: {
			showCart() {
				this.$emit('showCart')
			},
			detail() {
				if (this.isActive == 'time') {
					this.$emit('nextPage')
				} else {
					uni.navigateTo({
						url: `/pages/index/shopdetail?id=${this.ware.id}`
					})
				}


			},
			plusCart() {
				this.ware.is_del = 1;
			}
		}
	}
</script>

<style scoped lang="scss">
	.recomend_single {
		height: 100%;
		background: #fff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		width: 338rpx;
		border-radius: 10rpx;
		padding: 0 20rpx 10rpx;
		justify-content: space-between;

		.describe {
			width: 100%;
			font-size: 22rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.recomend_single .photo {
		margin: 20rpx 0 10rpx;
		width: 100%;
		height: 290rpx;
	}

	.recomend_single .price {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.plus {
		height: 46rpx;
		width: 46rpx;
		background: #FF7133;
		color: #fff;
		text-align: center;
		font-size: 36rpx;
		line-height: 46rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.qiang {
		background: $m-c;
		color: white;
		border-radius:10rpx;
		width: 50rpx;
		display: inline-block;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
	}
</style>
